$(function () {
	//$("#graphy_content").width($(window).width()-215);//设置曲线区域的宽度
   // updateChart();
			$(window).load(function(){
				
					$("#graphy_content").width($(window).width()-235);//设置曲线区域的宽度
                     updateChart();
			});
	
});
function updateChart() {
	  var yline;
      var xline;
	
    var data = [];
    var t = new Date();
    for (var i = 100; i >= 0; i--) {
        var x = new Date(t.getTime() - i * 1000);
        data.push([x, Math.random()]);
    }

    var g = new Dygraph(document.getElementById("graphy_content"), data,
                          {
							  showRoller : false, //true显示左下角的rollPeriod数值的方框
                              drawPoints: true,
                             
                              //	rollPeriod: 7,
                             // valueRange: [0.0, 1.2],
                              labels: ['Time', 'Random'],
					//		  xValueFormatter: Dygraph.dateString_,
              //  xValueParser: function(x) { return 1000*parseInt(x); },
             //   xTicker: Dygraph.dateTicker,
                      xAxisLabelWidth: 100,
              axes: {
                x: {
                  axisLabelFormatter: function(d, gran) {
                    return Dygraph.zeropad(d.getHours()) + ":"
                        + Dygraph.zeropad(d.getMinutes()) + ":"
                        + Dygraph.zeropad(d.getSeconds());
                  }
                }
              },
			   highlightCallback: function(e, x, pts) {
				return;
              //  for (var i = 0; i < pts.length; i++) {
                 // var y = pts[i].canvasy;
                //  lines[i].style.visibility = "visible";
                //  lines[i].style.top = y + "px";
				
          //        if (i == 0) 
				  {   var x = e.offsetX;
                      var y = e.offsetY;
					  xline.style.left = x + "px";
			          yline.style.visibility = "visible";
					  yline.style.top = y + "px";
				  }
            //    }
                xline.style.visibility = "visible";
              },

              unhighlightCallback: function(e) {
              //  for (var i = 0; i < 2; i++) {
              //    lines[i].style.visibility = "hidden";
              //  }
              //  xline.style.visibility = "hidden";
              },underlayCallback: function(canvas, area, g) {
	
				  }, legend : 'always',drawCallback:function(dygraph, is_initial){
					  
					  $(".text").html(dygraph); 
					  },showLabelsOnHighlight:false //是否显示鼠标捕捉到数据点时的详细信息
      
      });
			///////////////////mousemove 事件显示，十字分割线
			$('#graphy_content').on("mousemove", function(e) {
				
            if(e.offsetX){		
            $(".text").html(e.offsetX+"=="+e.offsetY);
			if(parseInt(e.offsetX)!==0)
			   xline.style.left = e.offsetX + "px";
			if(parseInt(e.offsetY)!==0)
			   yline.style.top=e.offsetY+"px";
			}else{//FIRFOX 没有offsetX属性
				 $(".text").html((e.clientX-$(this).offset().left)+"=="+(e.clientY-$(this).offset().top));
			if(parseInt(e.clientX-$(this).offset().left)!==0)
			   xline.style.left = (e.clientX-$(this).offset().left) + "px";
			if(parseInt(e.clientY-$(this).offset().top)!==0)
			   yline.style.top=(e.clientY-$(this).offset().top)+"px";
				}
			
         xline.style.visibility = "visible";
	     yline.style.visibility = "visible";
});

						  /////////////////////生成cross div对象

        yline = document.createElement("div");
        yline.className = "line yline";
        document.getElementById("graphy_content").appendChild(yline);


      xline = document.createElement("div");
      xline.className = "line xline";
      xline.style.top = "0px";
      document.getElementById("graphy_content").appendChild(xline);
	  /////////////////////////
                          setInterval(function () {
                              var x = new Date();  // current time
                              var y = Math.random();
                              //通过 push 和 shift  实现数据的动态更新,这样就只需要从服务端获取最新的数据添加到里面就可以了.
                              data.shift();
							  data.push([x, y]);
                              
                              g.updateOptions({ 'file': data });
							  delete x;
                          }, 1000);

}